<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=0.5, maximum-scale=0.5,minimum-scale=0.5,user-scalable=0" />
    <title>自由模式</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/chored.css">
    <link rel="stylesheet" href="./css/todoList.css">
    <link rel="stylesheet" href="./css/iconfont/iconfont.css">
    <style>
        .plan-list {
            margin-top: 20px;
            height: calc(100vh - 560px);
            overflow-y: auto;
        }
    </style>
</head>

<body>
    <audio id="piano-audio"></audio>
    <div>
        <div class="piano-box">
            <div class="piano-main">
                <div class="piano-left">
                   
                    <div class="tool-box">
                        <!--select下拉菜单：调式-->
                        <div class="select">
                            <label for="">调式：</label>
                            <select name="" id="select-tuning">
                                <!-- <option value="0">C调</option> -->
                            </select>
                        </div>

                        <!--select下拉菜单：和弦-->
                        <div class="select">
                            <label for="">和弦：</label>
                            <select name="" id="select-chord">
                                <option value="">请选择</option>
                            </select>
                        </div>
                        <!--开关：开启关闭是否显示键盘简谱名-->
                        <div class="switch">
                            <input type="checkbox" id="show-name" checked>
                            <label for="">显示简谱名</label>
                        </div>

                        <!--开关：开启关闭是否显示键盘映射-->
                        <div class="switch">
                            <input type="checkbox" id="show-keyboard" checked>
                            <label for="">显示键盘映射栏</label>
                        </div>

                        <!--开关-->
                        <div class="txt">连接midi键盘</div>
                        <div class="switch-box">
                            <input type="checkbox" id="switch" class="switch-input">
                            <label for="switch" class="switch-label"></label>
                        </div>

                        <!--是否显示电脑键盘-->
                        <div class="switch">
                            <input type="checkbox" id="isPcKey" checked>
                            <label for="">显示电脑键盘</label>
                        </div>
                    </div>

                    <!--和弦解释-->
                    <div class="chord-info">
                        <div class="chord-name">和弦名称：<span>-</span>和弦</div>
                        <div class="chord-attr">和弦属性：<span>-</span>和弦</div>
                        <div class="chord-form">和弦组成音：根音：<span>-</span>三音：<span>-</span>五音：<span>-</span></div>
                        <div class="chord-transposition">转位和弦：<span></span><span></span><span></span></div>
                    </div>
                    
                    <div class="mini-name"></div>

                    <!--和弦分类-->
                    <!-- <div class="chord-type">
                        <table class="chord-type-table">
                            <tr>
                                <td class="chord-type-title" rowspan="5">基本和弦</td>
                                <td style="width: 60px;">三和弦</td>
                                <td style="width: auto;"><span class="chordp-type-item">大三和弦</span><span class="chordp-type-item">小三和弦</span><span class="chordp-type-item">增三和弦</span><span class="chordp-type-item">减三和弦</span></td>
                                <td class="chord-type-title" rowspan="5">扩展和弦</td>
                                <td style="width: 60px;">九和弦</td>
                                <td style="width: auto;"><span class="chordp-type-item">大九和弦</span><span class="chordp-type-item">小九和弦</span><span class="chordp-type-item">属九和弦</span></td>
                            </tr>
                            <tr>
                                <td>七和弦</td>
                                <td><span class="chordp-type-item">大七和弦</span><span class="chordp-type-item">小七和弦</span><span class="chordp-type-item">属七和弦</span><span class="chordp-type-item">减七和弦</span><span class="chordp-type-item">小大七和弦</span><span class="chordp-type-item">增大七和弦</span><span class="chordp-type-item">半减七和弦</span></td>
                                <td>变化九和弦</td>
                                <td><span class="chordp-type-item">七减九和弦</span><span class="chordp-type-item">七加九和弦</span><span class="chordp-type-item">九减五和弦</span><span class="chordp-type-item">九增五和弦</span><span class="chordp-type-item">七减九增五和弦</span><span class="chordp-type-item">七加九减五和弦</span></td>
                            </tr>
                            <tr>
                                <td>挂留和弦</td>
                                <td><span class="chordp-type-item">挂留二和弦</span><span class="chordp-type-item">挂留四和弦</span><span class="chordp-type-item">属七挂二和弦</span><span class="chordp-type-item">属七挂四和弦</span></td>
                                <td>加九和弦</td>
                                <td><span class="chordp-type-item">大调加九和弦</span><span class="chordp-type-item">小调加九和弦</span></td>
                            </tr>
                            <tr>
                                <td>六和弦</td>
                                <td><span class="chordp-type-item">大六和弦</span><span class="chordp-type-item">小六和弦</span></td>
                                <td>六七和弦</td>
                                <td><span class="chordp-type-item">大调六七和弦</span><span class="chordp-type-item">小调六七和弦</span></td>
                            </tr>
                            <tr>
                                <td>六九和弦</td>
                                <td><span class="chordp-type-item">大调六九和弦</span><span class="chordp-type-item">小调六九和弦</span></td>
                                <td>十一和弦</td>
                                <td><span><span class="chordp-type-item">大十一和弦</span><span class="chordp-type-item">小十一和弦</span><span class="chordp-type-item">属十一和弦</span></td>
                            </tr>
                        </table>
                    </div> -->
                   
                    <div class="keyboard" id="keyboard">
                        <div class="function-keys">
                          <!-- 功能区域键 -->
                        </div>
                        
                        <div class="main-keyboard">
                          <!-- 主键盘区域键 -->
                        </div>
                        
                        <div class="numpad">
                          <!-- 小键盘区域键 -->
                        </div>
                      </div>

                </div>
                <div class="piano-right">
                    <div class="container">
                        <div class="calendar">
                            <!-- <h2>当前日期 <span id="selectedDate"></span></h2> -->
                            <span id="prevMonth"><span class="icon iconfont icon-zuojiantoushixinxiao" style="font-size: 30px; vertical-align: middle; color: #bbb;"></span></span>
                            <span id="currentMonthYear" style="vertical-align: middle;"></span>
                            <span id="nextMonth"><span class="icon iconfont icon-zuojiantoushixinxiao" style="font-size: 30px; vertical-align: middle; transform: rotate(180deg); display: inline-block;color: #bbb;"></span></span>
                            <table>
                                <thead>
                                    <tr>
                                        <th>日</th>
                                        <th>一</th>
                                        <th>二</th>
                                        <th>三</th>
                                        <th>四</th>
                                        <th>五</th>
                                        <th>六</th>
                                    </tr>
                                </thead>
                                <tbody id="calendarBody"></tbody>
                            </table>
                        </div>
                        <div class="plan">
                            <!--深蓝到浅蓝背景过渡的进度条，进度条的底色是灰色-->
                            <h3>任务 <span style="float: right;"><span id="completedPlans"></span>/<span id="totalPlans"></span></span>
                            </h3>
                            <div id="progress-bar">
                                <div id="progress-bar-inner"></div>
                            </div>
                            <!-- <form id="planForm"> -->
                                <!-- <input type="text" id="planTitle" placeholder="标题">
                                <textarea id="planDescription" placeholder="描述"></textarea> -->
                                <button class="add-plan"><span class="icon iconfont icon-add" style="font-size: 30px;"></span></button>
                            <!-- </form> -->
                            <div class="plan-list" id="planList"></div>
                            <div class="data-no"><img src="./images/noDataBg.png" style="width: 200px;"><span style="display: block;">暂无计划</span></div>
                        </div>
                    </div>
                </div>
            </div>
            <!--电脑键盘键位映射-->
            <div class="keyboard-map">
                
            </div>
            <div class="piano-bottom">
                <div class="piano"></div>
                <ul class="piano-group"></ul>
            </div>
        </div>



         <!--计划弹窗-->
         <div class="popup-container">
            <div class="popup">
                <div class="popup-header">
                    <h2>计划</h2>
                    <span class="close">&times;</span>
                </div>
                <div class="popup-body">
                    <form id="planForm">
                        <input type="text" id="planTitle" placeholder="标题">
                        <textarea id="planDescription" placeholder="描述" style="height: 100px;resize:none"></textarea>
                        <button class="save-plan">保存</button>
                    </form>
                </div>
            </div>
        </div>

    </div>
    <script src="./js/jquery.js"></script>
    <script src="./js/todoList.js"></script>
    <script src="js/chord.js"></script>
    <script src="./js/public.js"></script>
</body>

</html>